import React, { Component } from 'react';
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  Dimensions,
} from 'react-native';
import Picker from 'react-native-picker';
import ChinaList from 'china-location/dist/location.json';

export default class AreaComponent extends Component {
  /**
  地址三级联动
   */
  static defaultProps = {
    selectedValue: ['', '', ''], // 默认值
    onChange: val => val, // 切换选中
    pickerTitleText: '', // 标题
    cancelCallBack: false, // 点击取消返回选中值
    confirmCallBack: true, // 点击确定返回选中值
    selectCallBack: false, // 滚动列表返回选中值
    onRef: () => { }, // 父组件获取子组件实例
  };
  constructor(props) {
    super(props);
    this.props.onRef(this);
    this.state = {
      Communitycommunication: this.props.Communitycommunication,
      Communitycommunications: this.props.Communitycommunications,
      Communitycommunicationes: this.props.Communitycommunicationes,
      pd: false
    }
  }
  componentDidMount() {
    //	console.log(this.state.oo)
  }
  getAreaList() {
    // 地址json格式转换
    const proviceArr = [];
    for (const prokey in ChinaList) {
      const { name: provice, cities } = ChinaList[prokey];
      const cityArr = [];
      for (const citkey in cities) {
        const { name: city, districts } = cities[citkey];
        const disArr = [];
        for (const diskey in districts) {
          const area = districts[diskey];
          disArr.push(area);
        }
        cityArr.push({ [city]: disArr });
      }
      proviceArr.push({ [provice]: cityArr });
    }
    return proviceArr;
  }
  ShowPicker = () => {
    //console.log(this.state.Communitycommunication)
    this.setState({
      pd: !this.state.pd
    })

    const {
      cancelCallBack,
      confirmCallBack,
      selectCallBack,
      selectedValue,
      onChange,
      pickerTitleText,
    } = this.props;
    Picker.init({
      pickerData: this.getAreaList(),
      selectedValue: selectedValue, // 初始化选中值
      pickerTitleText: pickerTitleText, // 标题
      pickerConfirmBtnText: '确定',
      pickerCancelBtnText: '取消',
      onPickerConfirm: pickedValue => {
        // 点击选中
        if (confirmCallBack) {
          onChange(pickedValue);
        }
      },
      onPickerCancel: pickedValue => {
        // 点击取消
        if (cancelCallBack) {
          onChange(pickedValue);
        }
      },
      onPickerSelect: pickedValue => {
        // 滚动时候选中的值
        if (selectCallBack) {
          onChange(pickedValue);
        }
      },
    });
    Picker.show();
  };
  hidePicker = () => {
    Picker.hide();
  };
  componentWillUnmount() {
    this.hidePicker();
  }
  render() {
    return (
      <TouchableOpacity onPress={this.ShowPicker} style={!this.state.pd ? this.state.Communitycommunications : this.state.Communitycommunicationes} >
        <Text>{this.state.Communitycommunication}</Text>
      </TouchableOpacity>
    );
  }
}
